<template>
  <div class="Detail">
      <div class="magnifier">
        <div class="magnifier-body">
          <div class="Mirror"></div>
        </div>
        <div class="magnifier-Mirror">

        </div>
        <ul class="Detail-magnifier-list">
          <li  @click='click' v-for="(item,index) of ImgList" :key="index+'Detail-magnifier-list_li'" :class="index == 0? 'Detail-magnifier-list_li':''">
            <img :src="item" alt="" width="100%" height="100%">
          </li>
        </ul>
      </div>
      <div class="Detail-content">
        <!-- //这里是价格模块 -->
        <h2 class="Detail-content-title">{{this.AllData.productName}}</h2>
        <div class="Detail-content-box-1">
          <img src="/static/Detail/detail-active-banner-4.png" alt="" width="100%" height="100%">
        </div>
        <div class="Detail-content-box-2">
          <div class="Detail-content-box-2-wholesale solo">
            <span>批发价</span>
            <span>￥</span>
            <span>{{this.AllData.productPrice}}}</span>
          </div >
          <div class="Detail-content-box-2-retail solo">
            <span>淘宝价</span>
            <span>￥</span>
            <span>{{this.AllData.taobaoPrice}}</span>
          </div>
          <div class="Detail-content-box-2-Sales">
              <div>31</div>
              <div>代发销量</div>
          </div>
          <div class="Detail-content-box-2-detail">
            <div class="Detail-content-box-2-detaile-Item-number">
              <!-- 这里是货号模块 -->
              <span>货号</span>
              <span>9366#</span>
            </div>
            <div class="Detail-content-box-2-detaile-update-time">
              <span>上新时间</span>
              <span>2019-05-11 00:03</span>
            </div>
            <div class="Detail-content-box-2-detaile-size">
              <span>尺码</span>
              <span>均码</span>
            </div>
            <div class="Detail-content-box-2-detaile-color">
              <span>颜色</span>
              <span class="Detail-content-box-2-detaile-color-img">
                <img src="/static/Detail/1/detail_5.jpg" alt="" width="100%" height="100%">
              </span>
              <span class="Detail-content-box-2-detaile-color-img">
                <img src="/static/Detail/1/detail_1.jpg" alt="" width="100%" height="100%">
              </span>

            </div>
            <div class="Detail-content-box-2-detaile-des">若看上此宝贝可联系客服，我们将帮您上架宝贝，竭诚为您服务</div>
            <div class="Detail-content-box-2-detaile-buttom">我要上架</div>
          </div>
        </div>
      </div>
      <div class="Detail-store">
        <img src="/static/Detail/gold_shop.png" alt="" width="100%">
        <h2 class="Detail-store-title">火柴契</h2>
        <div class="Detail-store-title-line-2">
          <span class="Detail-store-title-line-2-gold"></span>
          <span class="Detail-store-title-line-2-old"><span class="Detail-store-title-line-2-year">店</span>5年</span>
        </div>
        <div class="Detail-store-title-line-3">
          <span>排行：</span><span>第<span class="Detail-store-title-line-3-ranking">54</span>名</span>
        </div>
        <div class="Detail-store-title-line-3">
          <span>旺旺：</span><span>潇洒小妹之家</span>
        </div>
        <div class="Detail-store-title-line-3">
          <span>商品：</span><span>177件</span>
        </div>
        <div class="Detail-store-title-line-3">
          <span>电话：</span><span>1555555555</span>
        </div>
        <div class="Detail-store-title-line-3">
          <span>微信：</span><span>wechat</span>
        </div>
        <div class="Detail-store-title-line-3">
          <span>QQ：</span><span>1111111111</span>
        </div>
        <div class="Detail-store-title-line-3">
          <span>产地：</span><span>广东省 广州</span>
        </div>
        <div class="Detail-store-title-line-3">
          <span>地址：</span><span>where</span>
        </div>
      </div>
      <des-box></des-box>
  </div>
</template>

<script>
import desBox from "./compontents/DesBox"
import axios from "axios"
export default {
  name: 'Detail',
  components: {
    desBox
  },
  data(){
    return{
      "AllData": {},
      "ImgList": []
      ,"detailIndex": 0
    }
  },
  beforeMount(){
    let This = this;
    this.detailIndex = this.$route.query.id;
    console.log(This.detailIndex)
    axios.post('/product/getDetail',{Id:This.detailIndex})
      .then(function (response) {
        This.AllData = response.data.data;
        for(let i=1;i<6;i++){
          This.ImgList.push('/static/'+This.AllData.Source+'/product_main/'+`${i}.jpg`)
        }
        console.log(This.ImgList);
        console.log(response,"这是后台返回的数据");
      })
      .catch(function (error) {

      });
  },
  watch: {
    ImgList(){
      const $magnifier_body = $(".magnifier-body");
      const $magnifier_Mirror = $(".magnifier-Mirror");
      $magnifier_body.css({
        "background": `url('${this.ImgList[0]}') no-repeat 0 0 /400px 400px`
      });
      $magnifier_Mirror.css({
      "background": `url('${this.ImgList[0]}') no-repeat 0 0 /800px 800px`
      })
    }
  },
  mounted(){
    const $magnifier_body = $(".magnifier-body");
    const $magnifier_Mirror = $(".magnifier-Mirror");
    const $Mirror = $(".Mirror")
    let This = this;
    //初始化
    
    $magnifier_body.eq(0).mouseenter(function(){
      $Mirror.css({
        "display": "block"
      })
      $magnifier_Mirror.css({
        "display": "block"
      })
    })
    $magnifier_body.eq(0).mouseleave(function(){
      $Mirror.css({
        "display": "none"
      })
      $magnifier_Mirror.css({
        "display": "none"
      })
    })
    $magnifier_body.eq(0).mousemove(function(e){
      let top = Math.max(100,e.clientY - $(this).offset().top);
      let left = Math.max(100,e.clientX - $(this).offset().left);
      top = Math.min(300,top);
      left = Math.min(300,left);
      $Mirror.css({
        "top": `${top -100}px`,
        "left": `${left - 100}px`
      })
      $magnifier_Mirror.css({
        "background-position": `${-(left-100)*2}px ${-(top-100)*2}px`
      })
    })
  },
  methods: {
    click(el){
      const $magnifier_body = $(".magnifier-body");
      const $magnifier_Mirror = $(".magnifier-Mirror");
      let This = this;
      $(el.target).parent().addClass("Detail-magnifier-list_li").siblings().removeClass("Detail-magnifier-list_li");
      $magnifier_body.css({
        "background": `url('${This.ImgList[$(el.target).parent().index()]}') no-repeat 0 0 /400px 400px`
      });
      $magnifier_Mirror.css({
        "background": `url('${This.ImgList[$(el.target).parent().index()]}') no-repeat 0 0 /800px 800px`
      })
    }
  }

}
</script>
<style lang="stylus" scoped>
  .Detail
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 20px;
    margin: 0 auto;
    width: 1192px;
    height: 590px;
    // background: pink;
    .magnifier
      position: relative;
      width: 400px;
      height: 484px;
      // background: blue;
      .magnifier-body
        position: relative;
        width: 400px;
        height: 400px;
        // background: #f60;
        cursor: crosshair;
        .Mirror
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          width: 200px;
          height: 200px;
          background: url("/static/Detail/cover.png") ;
      .magnifier-Mirror
        display: none;
        position: absolute;
        z-index: 999;
        top: 0;
        left: 420px;
        width: 400px;
        height: 400px;
        // background: #ccc;
        overflow: hidden;
      .Detail-magnifier-list
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        box-sizing: border-box;
        padding: 10px;
        width: 400px;
        height: 84px;
        // background: #ddd;
      .Detail-magnifier-list>li 
        box-sizing: border-box;
        width: 60px;
        height: 60px;
      .Detail-magnifier-list_li
        border: 1px solid #f60;
    .Detail-content
      width: 534px;
      height: 466px;
      // background: black;
      .Detail-content-title
        font-size: 18px;
        line-height: 30px;
        color: #333;
        text-align: left;
      .Detail-content-box-1
        width: 100%;
        height: 36px;
      .Detail-content-box-2
        position: relative;
        z-index: 1;
        width: 100%;
        height: 90px;
        background: #fbf1f0;
        .solo
          padding: 0 20px;
          width: 90%;
          height: 50%;
          overflow: hidden;
        .solo span
          padding: 0  0  0 5px;  
          color: #999;
          font-size: 14px;
          line-height: 45px;
          float: left;
        .solo span:nth-child(1)
          padding-right: 20px;
        .Detail-content-box-2-Sales
          position: absolute;
          right: 0;
          top: 22px;
          bottom: 0;
          width: 65px;
          height: 40px;
          border-left: 1px solid #ccc;
        .Detail-content-box-2-detail
          box-sizing: border-box;
          width: 100%
          height: 243px;
          // background: #000;
          // 这里是货号上新时间部分的内容
          .Detail-content-box-2-detaile-Item-number
            width: 100%;
            height: 30px;
            font-size: 12px;
            color: #6c6c6c;
            line-height: 30px;
            overflow: hidden;
          .Detail-content-box-2-detaile-Item-number>span
            padding-left: 30px;
            text-align: left;
            float: left;
          .Detail-content-box-2-detaile-Item-number>span:nth-child(1)
            width: 50px;
          .Detail-content-box-2-detaile-update-time
            width: 100%;
            height: 35px;
            font-size: 12px;
            color: #6c6c6c;
            line-height: 30px;
            overflow: hidden;
            border-bottom: 1px dotted #ccc;
          .Detail-content-box-2-detaile-update-time>span
            padding-left: 30px;
            float: left;
          .Detail-content-box-2-detaile-update-time>span:nth-child(1)
            width: 50px;
          .Detail-content-box-2-detaile-size
            box-sizing: border-box;
            padding: 10px 0;
            width: 100%;
            height: 50px;
          .Detail-content-box-2-detaile-size>span
            float: left;
            font-size: 12px;
            color: #6c6c6c;
            line-height: 30px;
            padding-left: 30px;
            text-align: left;
          .Detail-content-box-2-detaile-size>span:nth-child(1)
            width: 50px;
          .Detail-content-box-2-detaile-color
            box-sizing: border-box;
            padding: 15px 0;
            width: 100%;
            height: 70px;
            .Detail-content-box-2-detaile-color-img
              padding: 0;
              margin-left: 30px;
              width: 40px;
              height: 40px;
              border: 1px solid #ccc;
              background: red;
          .Detail-content-box-2-detaile-color>span
            float: left;
            font-size: 12px;
            color: #6c6c6c;
            line-height: 30px;
            padding: 0 30px;
            text-align: left; 
          .Detail-content-box-2-detaile-des
            padding: 0 30px;
            font-size: 12px;
            color: #ccc;
            line-height: 30px;
            text-align: left;
          .Detail-content-box-2-detaile-buttom
            margin-left: 30px;
            width: 140px;
            height: 40px;
            background: #fb658a;
            color: #fff;
            font-size: 16px;
            line-height: 40px;
            font-weight: 500;
            border-radius: 10px;
        .Detail-content-box-2-Sales>div:nth-child(1)
          font-size: 14px;
          color: #212121;
          line-height: 25px;
        .Detail-content-box-2-Sales>div:nth-child(2)
          font-size: 12px;
          color: #aaa;
        .Detail-content-box-2-wholesale>span:nth-child(2)
          font-size: 24px;
          color: #ff4640;
        .Detail-content-box-2-wholesale>span:nth-child(3)
          font-size: 26px;
          color: #ff4640;
    .Detail-store
      box-sizing: border-box;
      width: 204px;
      height: 399px;
      border: 1px solid #ffd100;
      .Detail-store-title
        margin: 0 auto;
        width: 174px;
        font-size: 16px;
        line-height: 24px;
        text-align: left;
      .Detail-store-title-line-2
        margin: 10px auto 0;
        width: 174px;
        height: 20px;
        .Detail-store-title-line-2-gold
          float: left;
          display: inline-block;
          width: 20px;
          height: 20px;
          background: url("/static/Detail/gold.png") no-repeat 0 0 /20px 20px;
        .Detail-store-title-line-2-old
          margin-left: 10px;
          float: left;
          width: 50px;
          height: 15px;
          border: 1px solid #f60;
          border-radius: 5px;
          font-size: 12px;
          line-height: 15px;
          color: #212121;
          .Detail-store-title-line-2-year
            display: inline-block;
            width: 30px;
            height: 15px;
            background: #f60;
            color: #fff;
      .Detail-store-title-line-3
        margin: 10px auto 0;
        width: 174px;
        height: 24px;
        font-size: 12px;
      .Detail-store-title-line-3>span
        float: left;
        line-height: 24px;
        text-align: left;
      .Detail-store-title-line-3  .Detail-store-title-line-3-ranking
        color: #ef3664;
      

</style>